<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件收藏</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/dist/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="demoTable">
    <!--<button type="button" class="layui-btn" id="addFile">
        <i class="layui-icon">&#xe654;</i>新建文件夹
    </button>
    <button type="button" class="layui-btn layui-btn layui-btn-warm" id="uploadFile">
        <i class="layui-icon">&#xe67c;</i>上传文件
    </button>
    <button type="button" class="layui-btn layui-btn-primary" id="removeFile">
        <i class="layui-icon">&#xe640;</i>批量删除
    </button>
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off"> &lt;!&ndash;原为name="id"&ndash;&gt;
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>  -->         <!--搜索栏目添加-->
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<span th:text="${session.users.realName}"></span>

<!--*************上面内容上传文件步骤等待完善，以下几步为新建文件夹操作！**********-->
<div id="addFolderDiv">
    <!-- <div style="margin:0 auto ;width: 60%;margin-top: 50px">
         <input type="text" name="folder" id="folder" placeholder="请输入新文件夹名称" class="layui-input">
         <div style="text-align: center;margin-top: 25px">
             <button type="button" class="layui-btn layui-btn-danger" id="checkFolderBtn">创建</button>
         </div>
     </div>-->
</div>
<script type="text/html" id="filenameDev">
    {{#if(d.fileType=='文件夹'){}}<!--两个等号？三个等号？-->
    <i class="glyphicon glyphicon-folder-close" style="color: #0000FF;font-size: 16px"></i>&nbsp;{{d.fileName}}
    {{#}else{}}
    <i class="glyphicon glyphicon-file" style="color: #4cae4c;font-size: 16px"></i>&nbsp;{{d.fileName}}
    {{# }}}
</script><!--上述内容待补充！-->
<!--***************************************************************************-->
<script src="layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的,下面几行需要再进行调整！！！！ -->
<script type="text/html" id="barDemo">
    <a lay-event="download" title="下载"><i class="layui-icon layui-icon-download-circle" style="font-size: 20px;"></i></a>
    <a lay-event="view" title="在线查看"><i class="layui-icon layui-icon-cellphone" style="font-size: 20px;"></i></a>
    <a  lay-event="share" title="分享"><i class="layui-icon layui-icon-share" style="font-size: 20px;"></i></a>
    <a lay-event="unstar" title="取消收藏"><i class="layui-icon layui-icon-star" style="font-size: 20px;"></i></a>
</script>
<script th:inline='none'>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        $("#addFolderDiv").hide();
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: 'getAllCollectFile'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'fileName', title: '文件名', templet: '#filenameDev', fixed: true}<!--fixed内容为自己添加-->
                , {
                    field: 'uploadTime',
                    title: '上传时间',
                    width: 300,
                    sort: true,
                    templet: "<div>{{layui.util.toDateString(d.uploadTime,'yyyy-MM-dd HH:mm:ss')}}</div>"
                }
                , {field: 'fileSize', title: '文件大小', width: 200, sort: true}
                , {field: 'fileType', title: '文件类型', width: 200, sort: true}
                , {
                    field: 'right', title: '操作', width: 250, align:'center', toolbar: '#barDemo'
                }
            ]]
            , page: true
            , id: 'testReload'
            , parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $("#addFile").click(function () {
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '300px'], //宽高，页面层大小！
                content: $("#addFolderDiv")
            });

        });//手动添加了";"
        $("#checkFolderBtn").click(function () {
            var folder = $("#folder").val();
            var parentId = $("#parentId").val();
            if (folder == "") {
                layui.alert("请将文件夹命名！")
            } else {
                $.ajax({
                    url: 'insertFolder',//????????????????大小写？
                    type: "get",
                    data: {fileName: folder, parentId: parentId},
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 0) {
                            layer.open({
                                title: '提示信息',
                                content: '文件夹创建成功！',
                                btn: ['确认'],
                                yes: function () {
                                    window.location.reload();

                                }
                            })
                        } else {
                            layer.alert(res.msg);
                        }

                    },
                    error: function () {
                        layui.alert("系统出错，请联系管理员！")
                    }
                })
            }

        })

        table.on('tool(user)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            var url = "\\upload\\"+data.fileName;
            if(layEvent === 'download'){
                document.location.href="download?fileAbsolute="+data.fileName;
            }
            else if(layEvent === 'view') {
                document.location.href=url;
            }
            else if(layEvent === 'share') {
                $.ajax({
                    url: 'getFile',
                    type: "get",
                    data: {fileAbsolute:data.fileName},
                    dataType: "json",
                    success: function (res) {
                        alert(res.url);
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['800px', '600px'],
                            closeBtn: 0,
                            shade: 0.8,
                            shadeClose: true,
                            content: res.url
                        });
                    }
                });
            }
            else if(layEvent === 'remove'){
                layer.alert("别按了这是删除但还没做呢");
            }
            else if(layEvent === 'edit'){
                layer.alert('别按了这是重命名但还没做呢');
            }
            else if(layEvent === 'unstar'){
                $.ajax({
                    url: 'uncollect',
                    type: "post",
                    data: {id:data.id},
                    dataType: "json",
                    success: function (res) {
                        debugger
                        layer.alert(res.msg);
                        table.reload("testReload");
                    }
                });


            }
        });
    });

    layui.use(['upload', 'layer'], function () {
        var upload = layui.upload;
        var layer = layui.layer;
        //执行实例
        upload.render({
            elem: '#uploadFile' //绑定元素
            , url: 'uploadFile' //上传接口
            , accept: 'file'//可上传文件
            , done: function (res) {
                //上传完毕回调
                if (res.code == 0) {
                    layer.open({
                        title: '提示信息'
                        , content: '导入成功！'
                        , btn: ['确认']
                        , yes: function () {
                            window.location.reload();//刷新页面
                        }
                    });
                } else {
                    layer.alert(res.msg);
                }
            }
            , error: function () {
                //请求异常回调
                layer.alert("系统出错，请联系管理员");
            }
        });
    })

</script>

</body>
</html>